<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    {% load staticfiles %}
    <!--引入JQuery-->
    <script type="text/javascript" src="{% static 'website/jquery-easyui/jquery-3.2.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'website/jquery-easyui/jquery.easyui.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'website/jquery-easyui/jquery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'website/js/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'website/jquery-easyui/locale/easyui-lang-zh_CN.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static  'website/jquery-easyui/themes/default/easyui.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'website/jquery-easyui/themes/icon.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'website/jquery-easyui/demo/demo.css' %}">
    <style type="text/css">
        /*去掉easyui tabs右侧滚动条*/
        #tabs .tabs-panels>.panel>.panel-body {
            overflow: hidden;
        }
    </style>

    <script>
        var projectID = undefined;  //全局变量，存储获取的项目ID ，用于展示节点树
        $(document).ready(function() {
            document.oncontextmenu=function(e) { // 通知 Web 浏览器不要执行与事件关联的默认动作;
                e.preventDefault();
            }

            // 初始化项目combobox下拉列表
            getProjects('TestProject').then(function(jsonData) {
                if (jsonData['result'] == 'success') {
                    $('#projects').combobox('loadData', jsonData['data']);
                } else {
                    $.messager.alert('错误信息', '获取项目失败：' + jsonData['data'], 'error');
                }
            });



            var id_of_settimeout = undefined; // 用于存储setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

            getProjectChosen('SprintTree').then(function(jsonData) {
                if (jsonData['result'] == 'success') {
                    // 初始化项目combobox的值，并获取项目ID
                    $('#projects').combobox('setValue', jsonData['data']['projectName']);
                    projectID = jsonData['data']['id']

                    // 请求迭代树
                    $('#tree').tree({
                        url:'nodeTree?treeType=SprintTree&projectID=' + projectID,
                        onClick: function(node){
                            var rootNodeId =  $(this).tree('getRoot', node.target).id
                            if (node.id != rootNodeId) {  // 非根节点
                                var father_node = $(this).tree('getParent', node.target); // 获取父节点
                                if (node.text != '任务概况' && node.text != '任务明细') {
                                    return;
                                }

                                // 取消上次延时未执行的方法
                                clearTimeout(id_of_settimeout);

                                //执行延时
                                id_of_settimeout = setTimeout(function(){
                                    if ($(this).tree('isLeaf', node.target)) { //如果为叶节点，即无子节点，则打开页面
                                        addTab(node.text, father_node.id);
                                    }
                                }, 300);

                            }
                        },
                        onDblClick: function(node){
                            // 取消上次延时未执行的方法
                            clearTimeout(id_of_settimeout);
                            nodetext = node.text; // 保存更改之前的节点名称
                            $(this).tree('beginEdit', node.target);

                        },
                        onAfterEdit: function(node){
                            if (node.text != '') {
                                $.post('/action/updateTreeNodeName',
                                        {
                                            nodeID:node.id,
                                            nodeText:node.text,
                                            treeType:'SprintTree'
                                        },
                                        function(data,status){
                                            if (data == 'success') {
                                                $.messager.alert('提示','保存成功', 'info');
                                            } else {
                                                $.messager.alert('提示', '保存失败: ' + data, 'info');
                                            }
                                        }
                                );
                            } else {
                                $.messager.alert('提示','保存失败，节点名称不能为空', 'info');
                                // 还原节点名称
                                $(this).tree('update', {target: node.target, text: nodetext});
                            }
                        },
                        onContextMenu:function(e, node){
                            treeNodeSelected = node; //定义全局变量,存储目标节点
                            e.preventDefault(); // 通知 Web 浏览器不要执行与事件关联的默认动作
                            $('#treeNodeMenu').menu('show', {
                                left: e.pageX,
                                top: e.pageY
                            });
                        }
                    });
                } else {
                    $.messager.alert('错误信息', '获取项目失败：' + jsonData['data'], 'error');
                }
            });
        });


        // 增加|删除节点
        function treeNodeMenuHandler(item){
            if (item.text == '添加') { //添加子节点            
                $.post('/action/appendTreeNode', {
                            nodeParentID:treeNodeSelected.id,
                            nodeText: 'nodename',
                            state: 'open',
                            iconCls: '',
                            attributes: '',
                            treeType: 'SprintTree',
                            projectID: projectID
                        },
                        function(data, status){
                            if (data == 'success') {
                                $.messager.alert('提示','添加成功', 'info');
                                $('#tree').tree({url:'nodeTree?treeType=SprintTree&projectID=' + projectID});
                            } else {
                                $.messager.alert('错误', '添加失败' + data, 'error');
                            }
                        });
            } else if (item.text == '删除') {
                var rootNodeId =  $('#tree').tree('getRoot', treeNodeSelected.target).id
                if (treeNodeSelected.id == rootNodeId) { //根目录不允许删除
                    $.messager.alert('告警','根目录不允许删除', 'warning');
                    return;
                }
                $.messager.confirm('确认','确定删除'+treeNodeSelected.text+'任务吗？',function(r){
                    if(r){
                        $.post('/action/removeTreeNode', {
                                    nodeID:treeNodeSelected.id,
                                    parentID:treeNodeSelected.parent_id,
                                    projectID: treeNodeSelected.project_id,
                                    order:treeNodeSelected.order,
                                    treeType:'SprintTree'
                                },
                                function(data, status) {
                                    if (data == 'success') {
                                        $.messager.alert('提示', '删除成功', 'info');
                                        $('#tree').tree('remove', treeNodeSelected.target);

                                    } else {
                                        $.messager.alert('错误', '删除失败', 'error');
                                    }
                                }
                        );
                    }
                });
            }
        }


        // 点击页面树，叶节点，打开对应tab页的函数实现
        function addTab(title, nodeID){
            var url;
            if (title == '任务概况') {
                url  = '/pages/testTaskOverview';
            } else if (title == '任务明细'){
                url = '/pages/testTaskDetail';
            }

            if($('#tabs').tabs('exists', title)){  // 如果tab已存在，则重新加载tab
                $('#tabs').tabs('select', title);  // 激活tab标签页

                var currentTab = $('#tabs').tabs('getSelected');
                // $('#tabs').tabs('update', {
                //     tab: currentTab,  
                //     options: {
                //         href: url
                //     }
                // });

                // 以上方法会导致，再次点击相同标签页的tab，请求的url还是第一次打开那个
                $('#tabs').tabs('close', title);  // 关闭tab标签页
                var iframe='<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
                $('#tabs').tabs('add',{
                    id: nodeID,
                    title: title,
                    content: iframe,
                    closable: true
                });
            } else{ //否则，添加tab
                var iframe='<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
                $('#tabs').tabs('add',{
                    id: nodeID,
                    title: title,
                    content: iframe,
                    closable: true
                });
            }

            //为tab标签关联其它操作，比如双击关闭，右键操作等;
        }


        // 树形结构上方，项目commbobox onSelect事件处理
        function onSelectComboboxRow(row) {
            projectID = row.id; // 注意：这里必须使用全局变量
            var projectName = row.choice;
            // 请求树
            $('#tree').tree({url:'nodeTree?treeType=SprintTree&projectID=' + projectID});

            // 存储选择的项目ID
            storeProjectChosen('SprintTree', projectID, projectName);

            // 关闭所有标签页
            var allTabs = $('#tabs').tabs('tabs');
            for(var i=0; i<allTabs.length; i++) {
                var title = allTabs[i].panel('options').title;
                $('#tabs').tabs('close', title);
                i--;
            }
        }

    </script>

</head>
<body class="easyui-layout">
<div data-options="region:'west',split: true" title="迭代管理" style="width: 250px;">
    <div style="position:absolute; left:0px; top:28px; width:94%; border:solid 1px #D2E0F2; display:block; background-color:white;"> <!--94%宽度，拖动时，宽度自适应-->
        <input id="projects" class="easyui-combobox" name="projects" style="width:100%;" data-options="
                valueField: 'id',
                textField: 'choice',
                label: '下拉选择项目',
                panelHeight:'auto',
                labelPosition: 'top',
                onSelect: onSelectComboboxRow
                ">
    </div>
    <div style="margin-top: 50px">
        <ul id="tree" data-options="animate:true,lines:true"></ul>
    </div>
</div>
<div data-options="region:'center',title:'测试任务管理'">
    <div class="easyui-tabs"  id="tabs" data-options="fit:true, border:false, plain:true">
    </div>
</div>

<!--定义右键节点时的弹出菜单-->
<div id="treeNodeMenu" class="easyui-menu" data-options="onClick:treeNodeMenuHandler">
    <div data-options="iconCls:'icon-add'">添加</div>
    <div data-options="iconCls:'icon-remove'">删除</div>
</div>
</body>
</html>